<template>
    <view
        class="pages u-skeleton"
        :class="GlobalThemes.commonBackGroundClass"
        :style="{ minHeight: bodyMinHeight + 'px', overflow: 'hidden' }"
    >
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :back-icon-size="$uni-font-size-sm"
                :is-back="true"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
                :custom-back="GoBack"
            >
                <view class="mp-name">
                    <text>{{ navTitle }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <addTip></addTip>
        
        <Adview :adSwitchKg="playerTopAD.isshow && isShowVideoTopAd" :homeADList="playerTopAD"></Adview>
        <!-- 播放器 -->
        <view
            class="player-box bg-my-gray minHeight u-skeleton-rect"
            v-if="(!isShowxx || (isShowxx && !isMp)) && !showAdModel && !froms && !saveModel"
        >
            <!-- #ifdef MP-WEIXIN -->
            <view v-if="videoInfo.title" class="video-box u-skeleton-fillet">
                <!-- 视频封面图 -->
                <image v-if="isShowPoster && !isFullscreen" :style="videoStyle" :src="poster"></image>
                <video
                    v-else
                    id="myVideo"
                    :show-center-play-btn="false"
                    :show-casting-button="true"
                    :show-screen-lock-button="true"
                    :enable-auto-rotation="true"
                    :show-snapshot-button="true"
                    :picture-in-picture-mode="picModel"
                    :src="trueVideoUrl"
                    @error="videoErrorCallback"
                    :initial-time="currentTime"
                    :controls="showControls"
                    :style="videoStyle"
                    :autoplay="false"
                    :title="navTitle"
                    :enable-play-gesture="true"
                    :vslide-gesture="true"
                    enable-danmu
                    :page-gesture="true"
                    :ad-unit-id="videoAd"
                    @timeupdate="playing"
                    @controlstoggle="controlstoggle"
                    @ended="playnext"
                    @play="onPlay"
                    :object-fit="fill"
                    @loadedmetadata="loadedmetadata"
                    @waiting="waiting"
                    @fullscreenclick="fullscreenclick"
                    @fullscreenchange="fullscreenchange"
                >
                    <cover-view>
                        <!-- 小屏视频自定义控制 -->
                        <cover-view class="load-video-text flotage" style="z-index: 9999; ">{{ VodLoadText }}</cover-view>
                        <view v-show="isShowControl" class="flotageY">
                            <view @tap="fillTap" style="display: flex;align-items: center;">
                                <view
                                    style="font-size: 56rpx;"
                                    class="custom-icon"
                                    :class="fill == 'fill' ? 'custom-icon-contain' : 'custom-icon-fill'"
                                ></view>
                            </view>
                        </view>
                        <view v-show="isShowControl" class="flotageY" style="right: 20rpx;top: 62%;">
                            <view @tap="playbackRate" style="display: flex;align-items: center;">
                                <view
                                    style="margin-right: 7.3rpx; opacity: 0.8;font-size: 62rpx;position: relative;color: #fff;"
                                    class="custom-icon custom-icon-beisu"
                                >
                                    <view class="flotageY" style="font-size: 18rpx; right: 19rpx;top: 50%;">
                                        {{ playbackRateList[playbackRateIndex] }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view v-show="isShowControl">
                            <view class="speed">
                                <view
                                    @tap="speed('jian')"
                                    style="color: #fff; position: absolute; right: 60%;top: 50%;transform: translate(-50%,-50%);"
                                >
                                    <view class="custom-icon custom-icon-kuaitui" style="font-size: 70rpx; color: #fff;"></view>
                                </view>
                                <view
                                    @tap="speed('jia')"
                                    style="color: #fff;position: absolute; left: 72%;top: 50%;transform: translate(-50%,-50%);"
                                >
                                    <view class="custom-icon custom-icon-kuaijin" style="font-size: 70rpx; color: #fff;"></view>
                                </view>
                            </view>
                        </view>
                        <!-- 小屏视频自定义控制 -->
                    </cover-view>

                    <!-- 全屏视频自定义控制 -->
                    <cover-view class="load-video-text flotage" style="z-index: 9999; ">{{ VodLoadText }}</cover-view>
                    <!-- 选集 -->
                    <view v-show="isShowControl && showXuanji" class="flotageYY">
                        <view @tap="chooseXuanji">
                            <text
                                style="padding: 10rpx 20rpx;color: #fff;font-size: 30rpx;border-radius: 10rpx;border:0.5px solid #FFFFFF"
                            >
                                选集
                            </text>
                        </view>
                    </view>
                    <view v-show="isShowControl" class="flotageY">
                        <!-- 撑满屏幕 -->
                        <view @tap="fillTap" style="display: flex;align-items: center;">
                            <view
                                style="font-size: 56rpx;"
                                class="custom-icon"
                                :class="fill == 'fill' ? 'custom-icon-contain' : 'custom-icon-fill'"
                            ></view>
                        </view>
                    </view>
                    <!-- 倍速按钮 -->
                    <view v-show="isShowControl" class="flotageY" style="right: 20rpx;top: 62%;">
                        <view @tap="playbackRate" style="display: flex;align-items: center;">
                            <view
                                style="margin-right: 7.3rpx;opacity: 0.8;font-size: 62rpx;position: relative;color: #fff;"
                                class="custom-icon custom-icon-beisu"
                            >
                                <view class="flotageY" style="font-size: 18rpx; right: 19rpx;top: 50%;">
                                    {{ playbackRateList[playbackRateIndex] }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-show="isShowControl">
                        <!-- 快进后退 -->
                        <view class="speed">
                            <view
                                @tap="speed('jian')"
                                style="position: absolute; right: 60%;top: 50%;transform: translate(-50%,-50%);"
                            >
                                <view class="custom-icon custom-icon-kuaitui" style="font-size: 70rpx;"></view>
                            </view>
                            <view
                                @tap="speed('jia')"
                                style="position: absolute; font-size: 80rpx; left: 72%;top: 50%;transform: translate(-50%,-50%);"
                            >
                                <view class="custom-icon custom-icon-kuaijin" style="font-size: 70rpx;"></view>
                            </view>
                        </view>
                    </view>
                    <view v-show="xuanjiMask">
                        <view class="xuanji-mask" @tap="changeXuanjiMask">
                            <view class="xuanji-mask-item">
                                <view
                                    :style="{
                                        backgroundColor: index == TabCur ? typelist[tabIndex].color : '#ffffff',
                                        color: index == TabCur ? '#ffffff' : '#000000',
                                        border: index == TabCur ? '1px solid ' + typelist[tabIndex].color : '1px solid #e3e3e3'
                                    }"
                                    v-for="(item, index) in videoInfo.srcList[vodPlayFromTab]"
                                    :key="index"
                                    @tap="tabSelect"
                                    :data-id="index"
                                >
                                    {{ item.name }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 全屏视频自定义控制 -->
                </video>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-QQ -->
            <view v-if="videoInfo.title" class="video-box u-skeleton-fillet">
                <!-- 视频封面图 -->
                <image v-if="isShowPoster && !isFullscreen" :style="videoStyle" :src="poster"></image>
                <video
                    v-else
                    id="myVideo"
                    :show-center-play-btn="false"
                    :show-casting-button="true"
                    :show-screen-lock-button="true"
                    :src="trueVideoUrl"
                    @error="videoErrorCallback"
                    :initial-time="currentTime"
                    :controls="showControls"
                    :style="videoStyle"
                    :autoplay="false"
                    :title="navTitle"
                    :enable-play-gesture="true"
                    :vslide-gesture="true"
                    enable-danmu
                    :page-gesture="true"
                    @timeupdate="playing"
                    @controlstoggle="controlstoggle"
                    @ended="playnext"
                    @play="onPlay"
                    :object-fit="fill"
                    @loadedmetadata="loadedmetadata"
                    @waiting="waiting"
                    @fullscreenclick="fullscreenclick"
                    @fullscreenchange="fullscreenchange"
                >
                    <cover-view>
                        <!-- 小屏视频自定义控制 -->
                        <cover-view class="load-video-text flotage" style="z-index: 9999; ">{{ VodLoadText }}</cover-view>
                        <view v-show="isShowControl" class="flotageY">
                            <view @tap="fillTap" style="display: flex;align-items: center;">
                                <view
                                    style="font-size: 56rpx;"
                                    class="custom-icon"
                                    :class="fill == 'fill' ? 'custom-icon-contain' : 'custom-icon-fill'"
                                ></view>
                            </view>
                        </view>
                        <view v-show="isShowControl" class="flotageY" style="right: 20rpx;top: 62%;">
                            <view @tap="playbackRate" style="display: flex;align-items: center;">
                                <view
                                    style="margin-right: 7.3rpx; opacity: 0.8;font-size: 62rpx;position: relative;color: #fff;"
                                    class="custom-icon custom-icon-beisu"
                                >
                                    <view class="flotageY" style="font-size: 18rpx; right: 19rpx;top: 50%;">
                                        {{ playbackRateList[playbackRateIndex] }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view v-show="isShowControl">
                            <view class="speed">
                                <view
                                    @tap="speed('jian')"
                                    style="color: #fff; position: absolute; right: 60%;top: 50%;transform: translate(-50%,-50%);"
                                >
                                    <view class="custom-icon custom-icon-kuaitui" style="font-size: 70rpx; color: #fff;"></view>
                                </view>
                                <view
                                    @tap="speed('jia')"
                                    style="color: #fff;position: absolute; left: 72%;top: 50%;transform: translate(-50%,-50%);"
                                >
                                    <view class="custom-icon custom-icon-kuaijin" style="font-size: 70rpx; color: #fff;"></view>
                                </view>
                            </view>
                        </view>
                        <!-- 小屏视频自定义控制 -->
                    </cover-view>
            
                    <!-- 全屏视频自定义控制 -->
                    <cover-view class="load-video-text flotage" style="z-index: 9999; ">{{ VodLoadText }}</cover-view>
                    <!-- 选集 -->
                    <view v-show="isShowControl && showXuanji" class="flotageYY">
                        <view @tap="chooseXuanji">
                            <text
                                style="padding: 10rpx 20rpx;color: #fff;font-size: 30rpx;border-radius: 10rpx;border:0.5px solid #FFFFFF"
                            >
                                选集
                            </text>
                        </view>
                    </view>
                    <view v-show="isShowControl" class="flotageY">
                        <!-- 撑满屏幕 -->
                        <view @tap="fillTap" style="display: flex;align-items: center;">
                            <view
                                style="font-size: 56rpx;"
                                class="custom-icon"
                                :class="fill == 'fill' ? 'custom-icon-contain' : 'custom-icon-fill'"
                            ></view>
                        </view>
                    </view>
                    <!-- 倍速按钮 -->
                    <view v-show="isShowControl" class="flotageY" style="right: 20rpx;top: 62%;">
                        <view @tap="playbackRate" style="display: flex;align-items: center;">
                            <view
                                style="margin-right: 7.3rpx;opacity: 0.8;font-size: 62rpx;position: relative;color: #fff;"
                                class="custom-icon custom-icon-beisu"
                            >
                                <view class="flotageY" style="font-size: 18rpx; right: 19rpx;top: 50%;">
                                    {{ playbackRateList[playbackRateIndex] }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-show="isShowControl">
                        <!-- 快进后退 -->
                        <view class="speed">
                            <view
                                @tap="speed('jian')"
                                style="position: absolute; right: 60%;top: 50%;transform: translate(-50%,-50%);"
                            >
                                <view class="custom-icon custom-icon-kuaitui" style="font-size: 70rpx;"></view>
                            </view>
                            <view
                                @tap="speed('jia')"
                                style="position: absolute; font-size: 80rpx; left: 72%;top: 50%;transform: translate(-50%,-50%);"
                            >
                                <view class="custom-icon custom-icon-kuaijin" style="font-size: 70rpx;"></view>
                            </view>
                        </view>
                    </view>
                    <view v-show="xuanjiMask">
                        <view class="xuanji-mask" @tap="changeXuanjiMask">
                            <view class="xuanji-mask-item">
                                <view
                                    :style="{
                                        backgroundColor: index == TabCur ? typelist[tabIndex].color : '#ffffff',
                                        color: index == TabCur ? '#ffffff' : '#000000',
                                        border: index == TabCur ? '1px solid ' + typelist[tabIndex].color : '1px solid #e3e3e3'
                                    }"
                                    v-for="(item, index) in videoInfo.srcList[vodPlayFromTab]"
                                    :key="index"
                                    @tap="tabSelect"
                                    :data-id="index"
                                >
                                    {{ item.name }}
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 全屏视频自定义控制 -->
                </video>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-TOUTIAO -->
            <view v-if="videoUrl"></view>
            <!-- #endif -->
        </view>
        <!-- 审内容 -->
        <view class="player-box minHeight showxx-title " :style="isShowxx ? statusMaskTop : ''" v-else>
            <image
                class="u-skeleton-rect"
                :lazy-load="true"
                style="width: 50%;margin-top: 10px;"
                :src="
                    videoInfo.vod_pic && videoInfo.vod_pic.substr(0, 4) == 'http'
                        ? videoInfo.vod_pic
                        : imageUrl + videoInfo.vod_pic
                "
            ></image>
        </view>
        <!-- 下面内容 -->
        <view :style="contentStyle">
            <view
                class="wxmp-goabout"
                v-if="
                    sysconf.wxwp_switch &&
                        member_group < sysconf.member_group_limit &&
                        (sysconf.member_group_switch || sysconf.show_xx || saveModel)
                "
            >
                <text class="text-green">{{ sysconf && sysconf.wxmp_btn_text }}</text>
                <image @click="goAbout" class="logo" :src="wxmp_btn_img"></image>
            </view>

            <view class="">
                <!-- 标题 -->
                <view class="cu-bar">
                    <view class="video-title">
                        <text class="text-df text-bold font-size-uni u-skeleton-rect">{{ videoInfo.title }}</text>
                        <text class="text-df u-skeleton-rect">评分：{{ videoInfo.vod_score || '-' }}</text>
                    </view>
                </view>
                
                <Adview :adSwitchKg="playerBottomAD.isshow" :homeADList="playerBottomAD"></Adview>

                <!-- 反馈按钮等 -->
                <view class="btns u-skeleton-fillet" v-if="!isShowxx">
                    <view>
                        <button @click="remarkme">
                            <u-icon :color="typelist[tabIndex].color" name="bell" label="订阅" size="40"></u-icon>
                        </button>
                    </view>
                    <view>
                        <button @click="picBtn">
                            <u-icon :color="typelist[tabIndex].color" name="share" label="海报" size="40"></u-icon>
                        </button>
                    </view>
                    <view>
                        <block v-if="!sysconf.kefu_switch">
                            <button @click="kefuBtn">
                                <u-icon :color="typelist[tabIndex].color" name="kefu-ermai" label="客服" size="40"></u-icon>
                            </button>
                        </block>
                        <block v-else>
                            <button open-type="contact">
                                <u-icon :color="typelist[tabIndex].color" name="kefu-ermai" label="客服" size="40"></u-icon>
                            </button>
                        </block>
                    </view>
                    <view>
                        <button @click="report">
                            <u-icon :color="typelist[tabIndex].color" name="info-circle" label="反馈" size="40"></u-icon>
                        </button>
                    </view>
                    <view>
                        <button open-type="share">
                            <u-icon :color="typelist[tabIndex].color" name="zhuanfa" label="分享" size="40"></u-icon>
                        </button>
                    </view>
                </view>
            </view>

            <!-- 播放源 -->
            <view class="" v-if="!isShowxx && !froms">
                <view class="cu-bar xuanji">
                    <view class="fl">
                        <text class="text-df text-bold font-size-uni u-skeleton-rect">{{ i18n.videoSource }}</text>
                    </view>
                </view>
                <view class="padding-sm flex flex-wrap grid col-5 u-skeleton-fillet">
                    <scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
                        <view
                            class="video-level cu-tag u-skeleton-rect"
                            :style="{
                                backgroundColor: item == vodPlayFromTab ? typelist[tabIndex].color : '#ffffff',
                                color: item == vodPlayFromTab ? '#ffffff' : '#000000',
                                border: item == vodPlayFromTab ? '1px solid ' + typelist[tabIndex].color : '1px solid #e3e3e3'
                            }"
                            v-for="(item, index) in vodPlayFrom"
                            :key="index"
                            @tap="tabPlayFromSelect(item)"
                            :data-id="index"
                        >
                            <text>{{ item }}</text>
                        </view>
                    </scroll-view>
                </view>
            </view>
            <!-- 剧集/源 -->
            <view class="" v-if="!isShowxx && !froms">
                <!-- 电视剧选集 -->
                <view class="cu-bar xuanji" v-if="videoInfo.type != 1">
                    <view class="fl" @click="xuanjiSort">
                        <text class="text-df text-bold font-size-uni u-skeleton-fillet">{{ i18n.xuanji }}</text>
                        <u-icon
                            :name="xuanjiSortName"
                            custom-prefix="custom-icon"
                            :color="typelist[tabIndex].color"
                            size="30"
                        ></u-icon>
                    </view>
                    <view class="fr">
                        <text v-show="showCopy || saveModel" class="text-grey text-sm" style="padding-right: 30rpx;">
                            点击下方按钮复制播放地址
                        </text>
                        <text class="text-grey text-sm">
                            {{ i18n.gong }}{{ (vodPlayFromTab != '' && videoInfo.srcList[vodPlayFromTab].length) || '-'
                            }}{{ i18n.ji }}
                        </text>
                    </view>
                </view>
                <!-- 电影选源 -->
                <view class="cu-bar xuanji u-skeleton-fillet" v-else>
                    <view class="fl">
                        <text class="text-df text-bold font-size-uni">{{ i18n.videoAnthology }}</text>
                    </view>
                    <view class="fr">
                        <text v-show="showCopy || saveModel" class="text-grey text-sm" style="padding-right: 30rpx;">
                            点击下方按钮复制播放地址
                        </text>
                        <text class="text-grey text-sm">
                            {{ i18n.gong }}{{ vodPlayFromTab != '' && videoInfo.srcList[vodPlayFromTab].length }}{{ i18n.ge }}
                        </text>
                    </view>
                </view>
                <!-- 集/源 tab -->
                <view
                    class="padding-sm flex flex-wrap grid col-5 u-skeleton-fillet"
                    :class="cssAnimation ? 'right-animation' : ''"
                >
                    <scroll-view scroll-y scroll-with-animation>
                        <view class="nav">
                            <view
                                class="view-item"
                                :style="{
                                    backgroundColor: index == TabCur ? typelist[tabIndex].color : '#ffffff',
                                    color: index == TabCur ? '#ffffff' : '#000000',
                                    border: index == TabCur ? '1px solid ' + typelist[tabIndex].color : '1px solid #e3e3e3'
                                }"
                                v-for="(item, index) in videoInfo.srcList[vodPlayFromTab]"
                                :key="index"
                                @tap="tabSelect"
                                :data-id="index"
                            >
                                <text>{{ item.name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
            
<!--            <view class="copy-url" v-if="saveModel && !isFullscreen">
                <view class="cu-bar">
                    <view class="video-title">
                        <text class="text-df text-bold font-size-uni u-skeleton-rect">手动复制（长按-全选-复制）</text>
                    </view>
                </view>
                <view class="">
                    <text style="word-break: break-all;" :selectable="true" :user-select="true">{{trueVideoUrl}}</text>
                </view>
            </view> -->

            <view class="">
                <view class="cu-bar">
                    <view class="video-title"><text class="text-df text-bold font-size-uni u-skeleton-rect">简介</text></view>
                </view>
                <!-- 简介 -->
                <view class="video-desc-box u-skeleton-fillet">
                    <view class="padding-10 video-desc text-sm">
                        <u-read-more
                            ref="uReadMore"
                            show-height="200"
                            :toggle="true"
                            :close-text="i18n.more"
                            :color="typelist[tabIndex].color"
                        >
                            <u-parse :html="videoInfo.remark" @load="parseLoaded"></u-parse>
                        </u-read-more>
                    </view>
                </view>
            </view>
            
            <!-- 原生广告 -->
            <Adview :adSwitchKg="customAD.isshow" :homeADList="customAD"></Adview>

            <!-- 广告弹窗 -->
            <uni-popup
                v-if="playerAd.ad_type != 5"
                ref="image"
                type="center"
                :show="showAdModel"
                :custom="true"
                :mask-click="false"
            >
                <view class="uni-image">
                    <view class="uni-image-close" style="z-index: 100000;top: 20px;" @click="playerADCancel('image')">
                        <uni-icons type="clear" color="#dddddd" size="60" />
                    </view>
                    <image
                        :style="playerADStyle"
                        class="image"
                        :src="playerAd.img ? apiImageUrl + playerAd.img : '/static/imgs/ad.png'"
                        mode="aspectFit"
                        @click="goAd"
                    />
                </view>
            </uni-popup>
        </view>

        <u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>

        <!-- 海报 -->
        <qrcode-poster
            ref="poster"
            :title="navTitle"
            :subTitle="videoInfo.remark"
            :headerImg="
                videoInfo.vod_pic && videoInfo.vod_pic.substr(0, 4) == 'http' ? videoInfo.vod_pic : imageUrl + videoInfo.vod_pic
            "
        ></qrcode-poster>

        <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

        <!-- 加载条 -->
        <w-loading :text="loadingBoxText" mask="true" click="false" ref="loading"></w-loading>
    </view>
</template>
<script>
import addTip from '@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/packageA/components/uni-icons/uni-icons.vue';
import Adview from '@/components/home-ad/ad-view.vue';
import QrcodePoster from '@/packageA/components/qrcode-poster/index.vue';
import Methods from './methods.js';
export default {
    components: {
        uniPopup,
        uniIcons,
        Adview,
        QrcodePoster,
        addTip
    },
    ...Methods
};
</script>

<style>
.pages {
    min-height: 100vh;
}

.padding-1 {
    padding: 1upx;
}
.padding-2 {
    padding: 2upx;
}
.padding-3 {
    padding: 3upx;
}
.padding-4 {
    padding: 4upx;
}
.padding-5 {
    padding: 5upx;
}
.padding-6 {
    padding: 6upx;
}
.padding-7 {
    padding: 7upx;
}
.padding-10 {
    padding: 10upx;
}
.padding-15 {
    padding: 15upx;
}
.padding-20 {
    padding: 20upx;
}
.padding-25 {
    padding: 25upx;
}
.padding-lr-5 {
    padding: 0 5upx;
}
.padding-lr-6 {
    padding: 0 6upx;
}
.padding-lr-10 {
    padding: 0 10upx;
}
.padding-lr-15 {
    padding: 0 15upx;
}
.padding-lr-25 {
    padding: 0 25upx;
}
.padding-lr-30 {
    padding: 0 30upx;
}
.padding-lr-42 {
    padding: 0 42upx;
}

.padding-tb-5 {
    padding: 5upx 0;
}
.padding-tb-10 {
    padding: 10upx 0;
}
.padding-tb-15 {
    padding: 15upx 0;
}
.padding-tb-20 {
    padding: 20upx 0;
}
.padding-tb-25 {
    padding: 50upx 0;
}
.padding-tb-30 {
    padding: 60upx 0;
}
.padding-tb-35 {
    padding: 70upx 0;
}

.padding-top-442 {
    padding-top: 442upx;
}
.padding-top-2 {
    padding-top: 400upx;
}
.padding-top-2-15 {
    padding-top: 415upx;
}

.margin-top-5 {
    margin-top: 5upx;
}
.margin-top-6 {
    margin-top: 6upx;
}
.margin-top-7 {
    margin-top: 7upx;
}
.margin-top-8 {
    margin-top: 8upx;
}

.uni-input-input {
    height: auto;
}
.bottom-nav {
    bottom: 0;
    top: inherit !important;
}
.movie-img {
    min-height: 300upx;
    max-height: 300upx;
}
.movie-img image {
    width: 100% !important;
}
.grid.col-3 > uni-view {
    min-height: 300upx;
    max-height: 300upx;
    height: 300upx;
}
.video-text {
    color: #fff;
    height: 20px;
    line-height: 20px;
    text-align: end;
    padding: 3px;
}
.nav-arrow:before {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    display: block;
    margin: auto;
    width: 15px;
    height: 15px;
    color: #8799a3;
    content: '\E6A3';
    text-align: center;
    font-size: $uni-font-size-sm;
    font-family: cuIcon;
    line-height: 15px;
}
.video-more-text {
    margin-right: 35px;
}
.grid.col-3.grid-square > uni-view {
    padding-bottom: 0px;
}
.filter-item {
    padding: 12px;
    margin-right: 5px;
}
.cate-img {
    min-height: 300upx;
    max-height: 300upx;
    position: relative;
}
.cate-box {
    max-height: 300upx;
    position: relative;
}
.list-img {
    height: 300upx;
}
.cate-text {
    padding: 0 5px !important;
    min-height: 45px;
    line-height: 45x;
    position: absolute;
    width: 100%;
    top: 0px;
}
.list-box {
    padding: 10px;
}
.web-views {
    max-height: 200px;
}
.minHeight {
    min-height: calc(100% / 3);
}
.padding-top-3 {
    padding-top: calc(100% - 100% / 3);
}
.status-mask {
    height: 30px;
    background: #000;
    z-index: 999;
    position: fixed;
    width: 100%;
}
.xuanji {
    min-height: 40upx !important;
    margin-top: 40upx;
}
.xuanji view text {
    padding-right: 10rpx;
}
.video-desc {
}
.video-desc-box {
    padding: 0 10px;
}
.mask {
    min-height: 250px;
    position: relative;
}
.refresh-text {
    margin: 0 auto;
    text-align: center;
    margin-top: 10%;
}
.refresh-img {
    width: 80px !important;
    height: 80px !important;
}
.movie-text {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
}
.download-list-text {
    width: 80%;
    display: inline-block;
    white-space: nowrap;
    overflow-x: auto;
}
@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}
.movie-text-box {
    width: 100%;
    height: 300rpx !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.banner-text {
    position: absolute;
}
.btn-clear {
    border-radius: 0px;
    border: none;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    font-size: $uni-font-size-sm;
    text-align: center;
    text-decoration: none;
    line-height: 0;
    background: none;
}
.controls-sendtv {
    color: #ffffff;
    width: 55upx;
    height: 45upx;
    right: 35upx;
    top: 45upx;
    position: absolute;
}

.user-like,
.user-download {
    display: inline-table;
}

.bg-myblue {
    background-color: #1296db;
}
.line-myblue {
    color: #1296db;
}
.progress-heigth {
    height: 10upx;
}
.download-list {
    margin: 0 10upx;
}

.video-list-item {
    height: 300upx;
    min-height: 300upx;
}

.border-none {
    border: none;
}

/* 插屏广告 */
.uni-image {
    position: relative;
}

.uni-image-close {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
}
.player-bottom-ad image {
    width: 100%;
    height: 270upx;
}

cover-view,
cover-image {
    display: inline-block;
}

.video-title {
    display: flex;
    flex-direction: row !important;
    width: 100%;
    justify-content: space-between !important;
}
.video-title text:nth-child(1) {
    width: 78%;
}
.showxx-title {
    text-align: center;
}
.xuanji-bottom {
    padding: 30upx;
}
.xuanji-box {
    border-top-left-radius: 10upx !important;
    border-top-right-radius: 10upx !important;
}
.xuanji-item {
    border-radius: 10upx !important;
}
.xuanji-item-box {
    overflow-y: auto;
}
.nav {
    width: 100%;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.nav .video-level {
    border-radius: 10upx !important;
    border: 1px solid #e7ebed;
    padding: 18px 10px !important;
    text-align: center;
}
.nav .view-item {
    border-radius: 10upx !important;
    border: 1px solid #e7ebed;
    padding: 8px 12px !important;
    text-align: center;
    width: 22.5%;
    margin: 0 5px 5px 3px;
}
.nav .cu-item {
    height: 25px !important;
    line-height: 25px !important;
}

.flotage {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.flotageYY {
    position: absolute;
    left: 54%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.flotageY {
    position: absolute;
    right: 30rpx;
    top: 40%;
    transform: translateY(-50%);
}
.video-box {
    position: relative;
}
.speed {
    display: flex;
    align-items: center;
}

.load-video-text {
    color: #fff;
    position: absolute;
    border: 0;
    font-size: $uni-font-size-sm;
}

@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    to {
        background-position: -100% 0;
    }
}

.right-animation {
    -webkit-animation: fadeInRightBig 0.3s 0.2s ease both;
    -moz-animation: fadeInRightBig 0.3s 0.2s ease both;
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(1000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@-moz-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(1000px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}
.xuanji-mask {
    position: absolute;
    top: 0;
    left: 0;
    padding: 80rpx;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.9);
    z-index: 19910528;
    align-content: center;
}
.xuanji-mask-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 19990704;
}
.xuanji-mask-item view {
    align-content: center;
    text-align: center;
    align-items: center;
    padding: 30rpx 25rpx;
    font-size: $uni-font-size-sm;
    border-radius: 10rpx;
    margin: 20rpx 20rpx 0 20rpx;
}
.btns {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.btns view {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.btns view:nth-child(1) {
    padding-right: 20rpx;
}
.btns view:nth-child(2) {
    padding-right: 20rpx;
}
.btns view:nth-child(3) {
    padding-right: 20rpx;
}
.btns view:nth-child(4) {
    padding-right: 20rpx;
}
.btns view button {
    line-height: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}
.btns view button::after {
    border: none;
}

.font-size-uni {
    font-size: $uni-font-size-sm;
}
.video-box-loading {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wxmp-goabout {
    margin-top: 10px;
    text-align: center;
}
.wxmp-goabout .logo {
    width: 750rpx;
    height: 90rpx;
    overflow: hidden;
    margin: 10rpx 0rpx;
    background-position: center;
    justify-content: center;
}
.wxmp-goabout text {
}

@font-face {
  font-family: "custom-icon"; /* Project id 2739663 */
  /* Color fonts */
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVwAAwAAAAACzQAAAUjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAImwjGgZgAFwKjhyLJQE2AiQDLAsqAAQgBYIUByAbwAjIDiUAAMAAUCgKQD78e9afNKlyKy+AgTNWMQA6HS+TXbfPTds1vx79BaHvfZFBPNhOI1Wp83suk3fpSgftwgd0AY7IzGz9qbXRcSyYUN5hqLRCQc4h3Q7J69uD7AUAlAB0AFKhhQwAha6lwEjI390yKKBUgkqogyoQ0cCy3BWNJOvWAdAfqnWguBowIIwHmEgxdwM0KKEX1QQ03kuV3gGGAXUP5GBkJ2R9ACo5E6oPCVQCMIUy4CVVX1WIZ7A0fo7mJR5oHkotKNRirOwVAEthykWhuZbiRdYyKKlErqpppy+Nr4wnxyvi7vg5SUpgWNW6c6UvnJ86X3E+4rzfOZDtSq9cC01fC2AVICsV+d96bmGqvPy9nwENhaVNBkb2OsG0WqVaYjQaDGboWLFepXyq8vSdc/zsqZ2xmO2E611vVLSI1nc8EWfEEwL/NgUm+G4gwntYKmaDxyr8O1S8IWyL0Ce4lfVG5eWTl8GvdIts0HaFoqBXWHN1nUf5h+4YJdi8UTZoEQHeGrF32160M/Q0JReeYnXBJ8DwT5JZhr9mwg2XaTeJPnS9JRRLjUPzTr7tfIQ02w0zCKGHZGdGYrf8djbMvHst1R6MUkKM8oVi9liMkFAEgmjJkcW8WPJhQRvl2xlq5rJW2HOShK7Xnl1+OsErlHBzlCL9lJdmd7I98BTZGY1aLq182y1GanTE93yxNTGfQFKS7lrpVtYTdCvol5ztwjW+GAlZLwPYy6+8tN6rDPOJ4K2eusC+P1CwRS0dNuys6rLuu4Oh9HLdcCgC8CLLNr6YkG9uZ501h+zZUo6GCEJGpHwtmW5Mz854PiOlfhqpX/6x7bnvpV10JeQnIpvmPwW//GozLmb6/yENSULqvvV1FauEe/InZlLrXljV+u5oEtd/t390231GY3PBufm5swUtzYIkGQnNLQVn5+fRPGJ/ZnSL2X4/F/a4OdHvFzm3J8z5/dmi21h8xDDCObAuZZVe/R5evJ9zOLmeig8MGvH24iWDdR8aifjkkocWP3lrn+kHSxbfviU08t1qVfdkU4KCWbaffYjsPzCzuMl+XE9PRZ6cWXqAPcnC9GkknlMvnF3YJ/JFOfzGfanmG+Y+NHBIQRn7sjqARaz6U9bcTE7/MQT2mPDOY73Snjxm5Kv9yvxs1K0T8X+Bh73Kl1V0HlM8Tu9MSHiGzle9rII14XCa2x3luH00QZbAbvJiKe1qEW6BEnc2VmS7rddp3tRolmtKk/d2dOxNLi0VJMkoKOWXaTZpyAocDsBZxZnew+/3sO3nMWh8j/qBtVu16oU6h3oiP3VmVUXdO6NJowPcd8p379vWOwnnCubmC86SIElc3NzSS2zVe0eKLwpz6BA5ByeWcuHq1BuPFGPp6pQdvTJGWjnndFDWxQ8t8anUIfIQ62vscS4Lq+FD74fte1tUVL2EKL0UR4+QH0iAfE/myP+ESKTVR6SuCaexQwDZUu37yxmTgrmkoXVf8z953dzyA2nzhYUUjtBceTVxzpnlT37Urs/8TUVvye2fVPVdlyfdAKQ7+0eaB64FsgT6P0WLuLuB/nHl16JoAeFiAX23FeJRnAYEXEJfHXEUZ/Ux/4+/TuMIRXVWfJ2vQBUaFKMGBdvfkg3IMN+GURqZWBllsBodUTlcOASF10vOodu0SVPGjdqEQd3a8DF1evXfzxrRKWAbNmPruzsDVaoFCnkNiXbadFxDhGRL4bUgcM8fDFhS2AYUUErjlZ10vwQA') format('woff2'),
       url('//at.alicdn.com/t/font_2739663_l6ggznz3qnh.woff?t=1630058026437') format('woff'),
       url('//at.alicdn.com/t/font_2739663_l6ggznz3qnh.ttf?t=1630058026437') format('truetype');
}

.custom-icon {
  font-family: "custom-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.custom-icon-beisu:before {
  content: "\e64c";
}

.custom-icon-contain:before {
  content: "\e6a0";
}

.custom-icon-fill:before {
  content: "\e636";
}

.custom-icon-kuaitui:before {
  content: "\e654";
}

.custom-icon-kuaijin:before {
  content: "\e624";
}

.custom-icon-sort-up:before {
  content: "\e652";
}

.custom-icon-sort-down:before {
  content: "\e653";
}

</style>
